<template>
  <div>
    <van-nav-bar
      title="详情页"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- <h1>{{this.$route.params.xiaoming}}</h1> -->
    <!-- <h1>{{this.$route.query.xiaoming}}</h1> -->
    <!-- <p>{{dataarr}}</p> -->
    <div v-if="dataarr.length!=0">
      <h1>{{ dataarr[0].title }}</h1>
      <p>{{ dataarr[0].content }}</p>
      <img :src="dataarr[0].img" alt="" />
    </div>
  </div>
</template>

<script>
import { homelist } from "@/apis/link.js";
export default {
  data() {
    return {
      dataarr: [],
    };
  },
  mounted() {
    this.listItem();
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async listItem() {
      console.log(this.$route.query.xiaoming);
      // 获取到所有列表数据
      let ok = await homelist();
      console.log("我是详情页", ok.data);

      //   根据动态路由匹配 传递过来的id   和  请求来的所有数据 进行一个数组的过滤
      //   找到指定的那一条数据

      let listdata = ok.data.filter((v) => {
        if (v.id == this.$route.query.xiaoming) {
          return v;
        }
      });

      this.dataarr = listdata;
    },
  },
};
</script>

<style>
</style>